<template>
  <div class="proposal">
    <div class="proposal-top"></div>
    <div class="proposal-content">
      <div class="proposal-content-left">
        <div class="content-top">
          <div>
            <p>议案建议总件数</p>
            <p>723</p>
          </div>
          <div>
            <p>议案建议总件数</p>
            <p>723</p>
          </div>
          <div>
            <p>议案建议总件数</p>
            <p>723</p>
          </div>
          <div>
            <p>议案建议总件数</p>
            <p>723</p>
          </div>
          <div>
            <p>议案建议总件数</p>
            <p>723</p>
          </div>
        </div>
        <div class="content-bottom">
          <div class="item-title">议案建议分类</div>
          <div class="item-matter">
            <pie :chartData="leftTwoData"></pie>
          </div>
        </div>
      </div>
      <div class="proposal-content-right">
        <div class="right-table">
          <div class="right-table-header">
            <span>编号</span>
            <span>标题</span>
            <span>领衔人</span>
            <span>代表团</span>
            <span>主办单位</span>
            <span>办理类别</span>
            <span>反馈意见</span>
          </div>
          <div class="right-table-content">
            <ul
              class="infinite-list"
              v-infinite-scroll="load"
              :infinite-scroll-disabled="routeLoad || noMore"
              :infinite-scroll-distance="5"
              style="overflow: auto; height: 100%"
            >
              <li
                v-for="(item, index) in routeData"
                class="infinite-list-item"
                :key="index"
              >
                <span> {{ index + 1 }}</span>
                <span>{{ item.suggestInfo.title }}</span>
                <span>{{ item.suggestInfo.leaderUser.userName }}</span>
                <span>
                  {{
                    item.suggestInfo.leaderUser | delegation(delegationList)
                  }}</span
                >
                <span>龙湾区财政局</span>
                <span>
                  <dict-tag
                    :options="dict.type.sys_jianyi_type"
                    :value="item.status"
                  />
                </span>
                <span>满意</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <img
      class="goBack"
      @click="
        () => {
          this.$router.go(-1);
        }
      "
      src="../../../assets/images/digitzation/back.png"
    />
  </div>
</template>
<script>
import autofit from "autofit.js";
import pie from "../components/home/pie.vue";
import { leftTwoData } from "../components/home/homeData";
import { suggestType, suggestList } from "@/api/digitization/home/index";
import { addDelegationList } from "@/api/dbxx/dbxxgroup/index";
export default {
  dicts: ["sys_jianyi_type"],
  data() {
    return {
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      routeData: [],
      noMore: false, // 控制滚动禁用
      routeLoad: false, // 控制滚动禁用
      leftTwoData: null,
      delegationList: [],
    };
  },
  methods: {
    load() {
      console.log("load");
      this.routeLoad = true;
      this.pageNo += 1; // 页码每次滚动+1
      this.getRouteList();
    },
    getRouteList() {
      suggestList(this.queryParams).then((res) => {
        let list = res.rows;
        for (let i = 0; i < list.length; i++) {
          this.routeData.push(list[i]);
        }
        // 如果请求回来的数据小于pageSize，则说明数据到底了。
        if (list.length < 20) {
          this.noMore = true;
        }
        // 避免数据总条数是pageSize的倍数时，数据到底还会请求一次。
        if (this.routeData.length === res.total) {
          this.noMore = true;
        }
        this.routeLoad = false;
      });
    },
  },
  components: {
    pie,
  },
  filters: {
    delegation(value, delegationList) {
      return delegationList.filter((item) => item?.deId == value?.deId)[0]
        ?.name;
    },
  },
  mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: ".proposal",
      resize: true,
    });
    suggestType().then((res) => {
      this.leftTwoData = leftTwoData(res.rows);
    });

    addDelegationList().then((response) => {
      this.delegationList = response.rows;
    });
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
.proposal {
  width: 100%;
  height: 100%;
  background: #021132;
  display: flex;
  flex-direction: column;
  &-top {
    width: 100%;
    height: 50px;
  }
  &-content {
    width: 100%;
    flex: 1;
    padding: 20px;
    display: flex;
    overflow: hidden;
    &-left {
      width: 30%;
      height: 100%;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      .content-top {
        width: 100%;
        height: 30%;
        margin-bottom: 20px;
        background: url("../../../assets/images/digitzation/center2.png")
          no-repeat;
        background-size: 100% 100%;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 30px;
        & > div {
          color: #fff;
          background: url("../../../assets/images/digitzation/item.png")
            no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          flex-direction: column;
          & > p:nth-child(1) {
            font-size: 18px;
          }
          & > p:nth-child(2) {
            font-size: 26px;
            font-weight: bold;
            color: #ffd400;
          }
        }
      }
      .content-bottom {
        width: 100%;
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        background: url("../../../assets/images/digitzation/center2.png")
          no-repeat;
        background-size: 100% 100%;
        .item-title {
          width: 100%;
          height: 30px;
          font-size: 18px;
          line-height: 30px;
          color: #fff;
          padding-left: 10px;
          background: url("../../../assets/images/digitzation/line.png")
            no-repeat;
          background-size: 100% 100%;
        }
        .item-matter {
          width: 100%;
          flex: 1;
        }
      }
    }
    &-right {
      height: 100%;
      flex: 1;
      padding: 20px;
      background: url("../../../assets/images/digitzation/center2.png")
        no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .right-table {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        &-header {
          width: 100%;
          color: #0074ff;
          display: flex;
          border-top: 1px solid #0b6cff;
          border-bottom: 1px solid #0b6cff;
          font-size: 22px;
          font-weight: bold;
          & > span {
            text-align: center;
            padding: 10px;
          }
          & > span:not(:nth-child(2)) {
            flex: 1;
          }
          & > span:nth-child(2) {
            width: 30%;
          }
        }
        &-content {
          width: 100%;
          flex: 1;
          overflow: hidden;
          color: #fff;
          .infinite-list-item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #0b6cff;
            font-size: 18px;
            & > span {
              padding: 10px;
              @include ellipsis(2);
              text-align: center;
            }
            & > span:not(:nth-child(2)) {
              flex: 1;
            }
            & > span:nth-child(2) {
              width: 30%;
              line-height: 2;
              text-align: left;
            }
          }
        }
      }
    }
  }

  .infinite-list::-webkit-scrollbar-track {
    background: #021132;
  }

  /* 自定义滚动条的滑块（thumb） */
  .infinite-list::-webkit-scrollbar-thumb {
    background: #3486da;
  }

  /* 当滑块悬停或活动时自定义滚动条的滑块 */
  .infinite-list::-webkit-scrollbar-thumb:hover {
    background: #fff;
  }
}
</style>
